import styled  from 'styled-components'
export const BoardWrapper = styled.div`
   width: 960px;
   margin: 0 auto;
   height: 300px;
  
`;
export const BoardLeft = styled.div`
   width: 640px;
   padding-top: 88px;
   padding-left: 15px;
   border-sizing: border-box;
   float: left;
   .board-img{
     width: 100%;
     height: 100px;
     background-color: hsla(0,0%,71%,.2);
     border-radius: 6px; 
     margin-bottom: 30px;
   }
`;
export const BoardRight = styled.div`
   width: 280px;
   float: right;
   padding-top: 88px;
   border-sizing: border-box;
  
`;
export const BoardContent = styled.div`
   padding: 20px 0;
   border-bottom: 1px solid #dcdcdc;
   overflow: hidden;
   .content-img{
     float: right;
     width: 125px;
     height: 100px;
     border-radius: 4px;
     border: 1px solid #f0f0f0;
     } 
`;
export const List = styled.div`
   float: left;
   width: 483px;
   cursor: pointer;
   .title{
     line-height: 27px;
     font-size: 18px;
     font-weight: bold;
     color:#333;
     }
   .desc{
     line-height: 24px;
     font-size: 13px;
     color: #999;
     } 
`;
export const LoadMore = styled.div`
   width: 100%;
   height: 40px;
   margin: 30px auto 60px;
   text-align: center;
   background: red;
   line-height: 40px;
   font-size: 15px;
   color: #fff;
   border-radius: 20px;
   background-color: #a5a5a5;
   cursor: pointer;
`;
export const WriterTitle = styled.div`
      width: 280px;
      overflow:hidden;
      .remmendwriter{
        float: left;
        font-size: 14px;
        color: #969696;
      }
      .remmendchange{
        float:right;
        display: inline-block;
        font-size: 14px;
        color: #969696;
      }
`;
export const WriterList = styled.div`
       width: 280px;
       height: 320px;
       cursor: pointer;
`;
export const ListContent = styled.div`
       margin-top: 15px;
       line-height: 20px;
       overflow: hidden;
       cursor: pointer;
       box-sizing: border-box;
       .List-title{
          padding-top: 5px;
          margin-right: 60px;
          font-size: 14px;
          color: #333;
          cursor: pointer;

       }
       .concern{
          float: right;
          margin-top: 5px;
          padding: 0;
          font-size: 13px;
          color: #42c02e; 
       }
       .culture{
          margin-top: 2px;
          font-size: 12px;
          color: #969696;
       }
       .list-img{
         margin-right: 10px;
          float: left;
          width: 48px;
          height: 48px;
          border: 1px solid #ddd;
          border-radius: 50%;
       }
`;
export const FindMore = styled.div`
    box-sizing: border-box;
    margin-top: 40px;
    padding: 7px 7px 7px 12px;
    left: 0;
    width: 280px;
    height: 35px;
    font-size: 13px;
    color: #787878;
    background-color: #f7f7f7;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    text-align: center;
`;
